<html>

<head>
  <%- include('../partials/admin-head') %>
</head>

<body>

<%- include('../partials/panel-header', {active: 'media'}) %>

<main>
  <form method="post" action="/upload" enctype="multipart/form-data">
    <fieldset>
      <label for="image">New media</label>
      <input type="file" id="image" name="image" />
      <div class="image-rename">
        <label for="rename">Rename</label>
        <input type="text" name="rename" id="rename"/>
      </div>
      <div class="image-resize">
        <label>
          <input type="checkbox" name="resize" id="resize" value="Resize" />Resize
        </label>
        <label for="width">w</label>
        <input type="text" name="width" id="width" value="800"/>
        <label for="height">h</label>
        <input type="text" name="height" id="height" />
      </div>
      <input type="submit" name="upload" value="Upload"/>
    </fieldset>
  </form>

  <% if (images.length > 0) { %>
    <form method="post" action="/cleanup">
      <input type="submit" onclick="return confirm('Permanently delete selected media?')" value="Delete selected"/>
      <fieldset>
        <div class="images">
          <% for (var image of images) { %>
            <div class="image">
              <label>
                <input type="checkbox" id="<%- image.name %>" name="<%- image.name %>" value="<%- image.name %>" unchecked/>
                <a href="<%- image.url %>"><%- image.name %></a>
              </label>
            </div>
          <% } %>
        </div>
      </fieldset>
    </form>
  <% } %>
</main>

</body>
</html>
